HandStack으로 게시판 프로젝트 시작하기

왜 게시판 프로젝트인가?

처음 개발을 시작할 때 게시판 만들기는 가장 기본적인 프로젝트로 권장됩니다.
게시판 예제는 HandStack 기반 개발의 핵심 개념을 이해하고 실습하는 데 매우 유용합니다.

• 웹 페이지 화면 구성
  • Tabler CSS Framework 기반의 레이아웃과 디자인 학습
• 서버 데이터 통신 처리
  • HandStack의 거래(Transaction) 과정 이해
• 데이터베이스 처리
  • 계약(Contracts) 기반 데이터 상호작용 방법 학습

개발 보조 도구: 생성형 AI

이 프로젝트에서는 Google Gemini을 참고 자료로 활용합니다.

https://gemini.google.com/app

• 단순 반복적인 업무를 줄여 생산성을 높일 수 있습니다.
• 개발 보조 도구로서 만족도가 높습니다.
• 아직 개발 업무에 AI를 활용해보지 않았다면, 이번 기회에 경험해보는 것을 추천합니다.

사용자 스토리 만들기

성공적인 프로젝트를 위해 가장 먼저 할 일은 사용자를 정의하고 요구사항을 명확히 하는 것입니다.

• 페르소나 (Persona)
  • 이 프로젝트의 사용자는 "개발자" 본인 1명으로 한정합니다.
• 핵심 요구사항
  • 서식과 이미지를 포함하는 글 작성 (위지윅 에디터)
  • "정보, 강좌, 소식" 등 글 분류 기능
  • 화면 전환 없는 빠른 수정 및 삭제
  • 최신순 보기, "분류, 기간, 제목" 조건 검색 (기간 기본값: 최근 1달)
  • 목록에서 "분류, 기간, 제목, 입력시간" 기준 정렬

화면과 기능 설계하기

사용자 스토리를 기반으로 필요한 화면과 기능을 구체화합니다.

• 게시글 목록 화면 (BOD010)
  • 조회 필터, 목록 정렬, 신규 등록/상세 조회 화면 호출
• 신규 게시글 등록 화면 (BOD011)
  • 위지윅 에디터, 제목/본문/작성자 입력
• 기존 게시글 편집 및 삭제 화면 (BOD012)
  • 게시글 정보 조회, 편집, 삭제 기능

HandStack에서 기본 제공하는 기능들로 대부분 개발이 가능합니다.

프로젝트 구조화

신뢰와 합의의 결과물인 소스코드는 일관된 규칙으로 관리되어야 합니다.

• 작업 항목 ID 분류
  • BOD: 게시판 프로젝트 ID
  • BOD010: 게시글 목록
  • BOD011: 게시글 신규 등록
  • BOD012: 게시글 편집 및 삭제

디렉토리 및 파일 구성

contracts
├─dbclient/HDS/BOD
│  ├─BOD010.xml
│  ├─BOD011.xml
│  └─BOD012.xml
├─transact/HDS/BOD
│  ├─BOD010.json
│  ├─BOD011.json
│  └─BOD012.json
└─wwwroot/BOD
   ├─BOD010.html, BOD010.js
   ├─BOD011.html, BOD011.js
   └─BOD012.html, BOD012.js

4단계: 데이터베이스 설계

HandStack은 SQL Server, Oracle, PostgreSQL 등 다양한 데이터베이스를 지원합니다.
게시판 프로젝트에서는 SQL Server를 사용합니다.

• Gemini 에게 테이블 설계 요청하기

간단한 분류 게시판 데이터베이스 테이블 정보 (컬럼명, 데이터 타입, 설명)를 SQL Server 기준으로 MarkDown 문법으로 만들어줘. 그리고 실행 결과에서 테이블을 생성 하는 ddl 문법에서 ID를 자동 증가 키 컬럼으로 구성하고 기존 테이블이 없으면 CREATE 하는 예제를 알려줘

Gemini 의 답변: 테이블 DDL

SQL Server 기준으로 분류 게시판 데이터베이스 테이블을 만들었습니다.

Gemini 의 답변: CRUD 쿼리

위의 Board 테이블 결과에서 SQL Server 기준으로 CRUD 쿼리를 만들어줘

1. Create (생성)

INSERT INTO Board (Category, Title, Content, Author, DatePosted)
VALUES (N'카테고리', N'제목', N'내용', N'작성자', GETDATE());

2. Read (조회)

SELECT * FROM Board WHERE ID = 1;

3. Update (수정)

UPDATE Board SET Title = N'새 제목', Content = N'새 내용' WHERE ID = 1;

4. Delete (삭제)

DELETE FROM Board WHERE ID = 1;

쿼리 적용 (dbclient 모듈)

Gemini 이 생성한 쿼리를 HandStack의 계약(Contract) 파일에 적용합니다.

• 기능 ID 규칙

  • 명령구분(1) + 기능(1) + 순번(2) = 4자리 ID (예: LD01)
  • 명령구분: D(Database), F(Function), A(API), T(Task)
  • 기능: I(Insert), U(Update), D(Delete), G(Get), L(List), M(Modify)

• 이 규칙은 프로젝트의 모든 모듈에 동일하게 적용되어 일관성을 유지합니다.

dbclient 계약 파일 예시: BOD010.xml

데이터베이스 쿼리는 XML 파일로 관리하며, SQL과 파라미터 매핑을 직접 제어합니다.
이를 통해 복잡한 쿼리 튜닝과 소스 버전 관리가 용이합니다.

<!-- contracts/dbclient/HDS/BOD/BOD010.xml -->
<mapper xmlns="contract.xsd">
    <header>
        <application>HDS</application>
        <project>BOD</project>
        <transaction>BOD010</transaction>
        <datasource>DB01</datasource>
    </header>
    <commands>
        <statement id="LD01" desc="분류, 기간, 제목을 기준으로 게시글 조회">
            <![CDATA[
SELECT B.ID, B.Category, B.Title, B.Author, B.DatePosted, '확인' AS EditPost
FROM Board B 
WHERE B.DatePosted BETWEEN @StartDate AND DATEADD(day, 1, @EndDate)
  AND (@Category = '' OR B.Category = @Category)
  AND (@Title = '' OR B.Title LIKE ('%' + @Title + '%'))
ORDER BY
  CASE WHEN @Sequence = 'ASC' THEN
    CASE @OrderBy WHEN 'ID' THEN CONVERT(VARCHAR, ID) WHEN 'Category' THEN Category ... END
  END ASC,
  CASE WHEN @Sequence = 'DESC' THEN
    CASE @OrderBy WHEN 'ID' THEN CONVERT(VARCHAR, ID) WHEN 'Category' THEN Category ... END
  END DESC;
            ]]>
        </statement>
    </commands>
</mapper>

거래 요청 관리 (transact 모듈)

화면의 모든 요청은 단일 EndPoint로 전달되며, transact 계약 파일(JSON)을 통해 유효성을 검증합니다. 이 규칙을 벗어나는 요청은 서버에서 자동으로 차단됩니다.

{
    "ApplicationID": "HDS",
    "ProjectID": "BOD",
    "TransactionID": "BOD010",
    "Services": [
        {
            "ServiceID": "LD01",
            "Authorize": false,
            "ReturnType": "Json",
            "CommandType": "D",
            "Inputs": [ { "Type": "Row" } ],
            "Outputs": [ { "Type": "Grid" } ]
        }
    ]
}

화면 개발 (wwwroot 모듈)

화면은 웹 표준 기술(HTML, Javascript)과 오픈소스 CSS 프레임워크(Tabler)로 개발합니다.

• 기본 HTML 구조
  • syn.loader.js가 개발/운영 환경에 맞게 필요한 리소스를 자동으로 로드합니다.

<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <form id="form1" syn-datafield="MainForm">
    <!-- 페이지 컨텐츠 -->
  </form>
  <script src="/js/syn.loader.js"></script>
</body>
</html>

• 화면 디자인(HTML)과 업무 로직(JS)은 동일한 이름의 파일로 분리하여 관리합니다.

화면 개발 예시: HTML (BOD010.html)

HTML 요소에 syn- 접두사를 가진 속성을 사용하여 선언적으로 UI와 데이터를 바인딩합니다.

• 이벤트 처리기 및 UI 컨트롤 설정

<!-- 조회 버튼 -->
<button type="button" id="btnSearch" syn-events="['click']" class="btn">조회</button>

<!-- 조회 조건: 제목 -->
<input id="txtTitle" syn-datafield="Title" syn-options="{belongID: ['LD01']}">

<!-- 데이터 그리드 -->
<syn_grid id="grdBoard" syn-datafield="Board" syn-options="{
    height: 420,
    columns: [
        ['ID', '게시글 ID', 100],
        ['Title', '제목', 400],
        ['EditPost', '상세', 80, false, 'button']
    ]
}"></syn_grid>

• syn.controls.js 라이브러리가 제공하는 다양한 UI 컴포넌트로 생산성을 높입니다.

화면 개발 예시: JavaScript (BOD010.js)

업무 로직은 $BOD010과 같이 정해진 구조를 가진 Javascript 객체로 작성하여 일관성을 확보합니다.

'use strict';
let $BOD010 = {
    // 거래(Transaction) 정의
    transaction: {
        LD01: {
            inputs: [{ type: 'Row', dataFieldID: 'MainForm' }],
            outputs: [{ type: 'Grid', dataFieldID: 'Board' }]
        }
    },
    // 화면 로드 시 실행될 Hook
    hook: {
        pageLoad() {
            syn.$w.transactionAction('LD01'); // 페이지 로드 시 목록 조회
        }
    },
    // 사용자 이벤트 핸들러
    event: {
        btnSearch_click(evt) {
            syn.$w.transactionAction('LD01'); // 조회 버튼 클릭 시 목록 조회
        },
        grdBoard_cellButtonClick(elID, row, column, prop, value) {
            // 그리드 내 버튼 클릭 시 상세 팝업 열기
        }
    }
};

데모 화면 스크린샷

게시글 목록 (BOD010)

신규 등록 (BOD011)	편집/삭제 (BOD012)

요약 및 결론

HandStack을 사용하면 순수한 웹 표준 기술(HTML, Javascript)과 SQL만으로 비즈니스 애플리케이션을 빠르고 일관되게 개발하고 운영할 수 있습니다.

• 컴파일 과정 없이 텍스트 편집기만으로 개발 가능
• 계약(Contract) 기반의 명확한 구조로 유지보수 비용 절감
• 선언적 UI 바인딩과 UI 컴포넌트로 높은 생산성 제공
• 기존 개발 방식 대비 학습 및 운영 비용 절감에 뚜렷한 장점 제공

HandStack은 개발자들이 본연의 비즈니스 로직에 집중할 수 있도록 돕는 오픈소스 솔루션입니다.